<template>
	<div class="writeReport">
		<Row :gutter="16">
			<i-col span="11" offset="1">
				<i-form v-model="formItem" :label-width="80">
					<Form-item label="工作汇报：">
						<Card>
							<div style="line-height:30px">
								<p v-for="(item,index) in formItem.contents">
									{{index+1}}、{{item}}
									<a class="closeContent" @click="contentClose(index)"><Icon type="close"></Icon></a>
								</p>
								<Input style="margin-top:3px" v-model="newContent" icon="ios-plus-empty" placeholder="添加工作汇报" @on-keyup.enter="contentAdd()"></Input>
							</div>
						</Card>
					</Form-item>
					<Form-item label="意见建议：">
						<Input v-model="formItem.opinion" type="textarea" :rows="4" placeholder="可以写工作中发现中心的一些问题！"></Input>
					</Form-item>
					<Form-item label="">
						<Button type="primary" @click="submit">提交</Button>
					</Form-item>
				</i-form>
			</i-col>
			<i-col span="11" offset="1">
				<p class="noteTitle">注意事项：</p>
				<div class="noteBady">
					<p>1、本次汇报开启时间：<span style="color:#d73435">{{time}}</span>；</p>
					<p v-for="(item,index) in notes">{{ index+2 }}<span>、</span>{{item}}；</p>
				</div>
			</i-col>
		</Row>
	</div>
</template>

<script>
export default {

	name: 'writeReport',

	data () {
		return {
			formItem:{
				contents:[],
				opinion:''
			},
			newContent:'',
			time:'2015-10-15~2015-11-15',
			notes:[
			'工作汇报不必提及值班、值日、开会等常规工作',
			'工作汇报中不要填写与工作室无关的工作，如组织班级活动等'
			],
		}
	},
	methods:{
		submit(){
			console.log(this.formItem)
		},
		contentAdd(){
			if (this.newContent!=='') {
				this.formItem.contents.push(this.newContent);
				this.newContent=''
			}
		},
		contentClose(index){
			this.formItem.contents.splice(index, 1);
		}
	}
}
</script>

<style lang="css" scoped>
.writeReport{
	width: 100%;
	height: 100%;
	padding-top: 20px
}
.writeReport .noteTitle{
	font-size: 25px
}
.writeReport .noteBady{
	font-size: 1rem;
	color: rgba(0,0,0,.65);
	line-height: 2;
	padding: 15px;
	padding-left: 0px
}
.closeContent{
	float: right;
	margin-right: 8px
}
</style>